<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .test {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .one {
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        .two {
            width: 200px;
            height: 200px;
            background-color: rgb(0, 202, 61);
        }

        .three {
            width: 200px;
            height: 200px;
            background-color: rgb(255, 208, 0);
        }
    </style>
</head>

<body>

    <div id="app">
        <!-- <input type="text" v-model="url"> -->
        <!-- <a v-bind:href="url">去跳转</a> -->
        <!-- <img :src="img" alt=""> -->
        <!-- <input type="text" v-model="title"> -->
        <!-- <div :[title]="test"></div> -->
        <!-- 属性名和属性值都可以是变量 -->
        <!-- <input type="checkbox" v-model="flag"> -->
        <!-- <input type="number" v-model="flag"> -->
        <!-- <div :class="{one:flag == 0}" @click="fun"></div> -->
        <!-- <div :class="{one:flag == 1}" @click="fun"></div> -->
        <!-- <div :class="{one:flag == 2}" @click="fun"></div> -->
        <!-- 冒号左边是类名 右边是条件 条件为真类名加载 条件为假类名不加载 -->

        <!-- <input type="number" v-model="flag"> -->
        <!-- 0 蓝色
        1 绿色
        2 黄色 -->
        <div :class="{one:flag == '0',two:flag == 1,three:flag == 2}" @click="fun"></div>
        <!-- v-bind 动态的绑定属性 -->

        <!-- 动态绑定style -->
        <!-- <input type="number" v-model="flag"> -->
        <!-- <div :style="{fontSize:flag+'px'}">dddddddd</div> -->
        <!-- 冒号左边是css属性 右边是属性值  -->

        <input type="number" v-model="flag">
        <div :style="{color:(flag == 0?'red':'')}">111111</div>
        <div :style="{color:(flag == 1?'red':'')}">2222222</div>
        <div :style="{color:(flag == 2?'red':'')}">333333</div>
    </div>
    <script>

        let vm = new Vue({
            // 数据层
            el: "#app", //选择器
            data: {  //存放数据 存放变量
                flag: 0,
                title: "class",
                test: "one",
                url: "http://www.baidu.com",
                img: "https://www.buchouwang.com/img/banner1.0a300ac3.png"
            },
            methods: { //用来定义方法的地方
                fun() {
                    this.flag = !this.flag
                }
            }
        })



    </script>



</body>

</html>